<template>
	<view style="padding-bottom: 50rpx;">
		<page-head :title="'测评'" :headtype="2"></page-head>
		<view class="raisal flex marginAuto">
			<view class="raisaltitle">测评列表</view>
			<view class="raisalgo flex" @click="apifun.navigate('/pages/my/mydrivermaketestresultlist')">
				<view class="raisalgotxt mainColor">历史测评</view>
				<uv-icon name="arrow-right" size="16" color="#1686F8"></uv-icon>
			</view>
		</view>
		<view class="raisallist">
			<view class="raisalitem marginAuto" v-for="(item,index) in wtlist" :key="index">
				<view class="raisalitemtitle">
					{{ index+1 }}、{{ item.title }} 
					<!-- <text style="font-size:24rpx;color:#666666;">(基础知识、环车检查、仪表讲解、上路前调
					整、上路简单操作)</text> -->
				</view>
				<view class="raisalitemse flex">
					<view class="raisalitemseeach flex" 
					@click="selectfun(item,indexs)" 
					v-for="(items,indexs) in item.sedata" :key="indexs">
						<view class="raisalitemsele flex" :class="item.acid == indexs ? 'mainBg':'' ">
							<uv-icon class="marginAuto" name='checkmark' size="16" color="#ffffff"></uv-icon>
						</view>
						<view class="raisalitemtxt">{{ items.title }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:100rpx;">
			<uv-button text="提交" @click="enter()" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	export default  {
		data() {
			return {
				apifun:this.apifun,
				wtlist:[]
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			enter(){
				let fz = [];
				this.wtlist.forEach((item,index)=>{
					item.sedata.forEach((items,indexs)=>{
						if(item.acid == indexs){
							fz.push(items.fs)
						}
					})
				})
				if(fz.length == this.wtlist.length){
					let sum = [...fz].reduce((acc, val) => acc + val, 0);
					let sendData = {
						score:sum
					};
					this.apifun.unirequest('/api/partnerDrive/submitUserExamine','post',sendData,(res)=>{
						// console.log(res)
						if(res.code === 200){
							let datas = res.data;
							this.apifun.navigate('/pages/accompany/maketestresult','score='+sum)
						}else{
							this.apifun.toast(res.msg)
						}
					})
				}else{
					this.apifun.toast('测评未完成；请继续答题')
				}
			},
			selectfun(item,indexs){  // 选择
				this.$set(item,'acid',indexs);
			},
			initData(){
				this.apifun.unirequest('/api/partnerDrive/getExamineList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let zldata = []
						datas.forEach((item,index)=>{
							zldata.push({
								id:item.id,
								title:item.title,
								sedata:[
									{"title":"入门",'fs':item.primary},
									{"title":"掌握",'fs':item.middle},
									{"title":"熟练",'fs':item.high},
								]
							})
						})
						this.wtlist = zldata;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.raisal{
		width: 690rpx;
		padding: 10rpx 0;
		justify-content: space-between;
		line-height: 50rpx;
		.raisaltitle{
			color: #222222;
			font-size: 34rpx;
			font-weight: 600;
		}
		.raisalgo{
			.raisalgotxt{
				font-size: 28rpx;
			}
		}
	}
	.raisallist{
		.raisalitem{
			width: 650rpx;
			margin-top:20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			.raisalitemtitle{
				font-size: 30rpx;
				color: #222222;
			}
			.raisalitemse{
				padding: 40rpx 0  20rpx;
				justify-content: space-between;
				.raisalitemseeach{
					.raisalitemsele{
						width: 40rpx;
						height: 40rpx;
						border: 1px solid #E7E7E7;
						background:#ffffff;
						border-radius: 50%;
						margin-right: 10rpx;
					}
					.raisalitemtxt{
						font-size: 30rpx;
						color: #222222;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>